<template>
  <div class="container">
    <div class="top-tabs">
      <ul class="flex v-align-c">
        <li class="font-14 flex-item pad-t-9" @click="tabClick(index)"
          v-for="(item, index) in tabs" :key="index">
          <div class="flex flex-center"
            :class="index === 0 ? 'actived' : ''">{{ item }}</div>
        </li>
      </ul>
    </div>
    <div class="height-51"></div>
    <div class="info-content">
      <div class="input-bar">
        <p>直播标题必须为3-17个汉字(一个字等于两个英文字符或特殊字符)</p>
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">直播标题</div>
            <input class="flex-item" v-model="info.roomName" maxlength="17" placeholder="最多17个字"/>
          </div>
        </div>
      </div>
      <div class="input-bar">
        <p>计划直播日期范围必须在两天以内，时间范围必须在12小时以内</p>
        <div class="input-line">
          <div class="flex v-aling-c border-b">
            <div class="font-16 font-color-6">计划开播时间</div>
            <div class="flex-item text-align-r font-15 picker-data" :class="info.dateStartValue ? 'font-color-9' : 'font-color-6'">
              <div class="flex v-align-c align-r">
                <picker mode="date" class="mar-r-15" :value="info.dateStartValue" start="1999-01-01" end="2999-12-12" @change="dateStartChange">
                  <span>{{ info.dateStartValue }}</span>
                </picker>
                <picker mode="time" :value="info.timeStartValue" start="00:00" end="24:00" @change="timeStartChange">
                  <span>{{ info.timeStartValue }}</span>
                </picker>
              </div>
            </div>
            <icon class="iconfont icon-arrow-right font-color-6 mar-l-3"></icon>
          </div>
        </div>
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">计划结束时间</div>
            <div class="flex-item text-align-r font-15 picker-data" :class="info.dateEndValue ? 'font-color-9' : 'font-color-6'">
              <div class="flex v-align-c align-r">
                <picker mode="date" class="mar-r-15" :value="info.dateEndValue" start="1999-01-01" end="2999-12-12" @change="dateEndChange">
                  <span>{{ info.dateEndValue }}</span>
                </picker>
                <picker mode="time" :value="info.timeEndValue" start="00:00" end="24:00" @change="timeEndChange">
                  <span>{{ info.timeEndValue }}</span>
                </picker>
              </div>
            </div>
            <icon class="iconfont icon-arrow-right font-color-6 mar-l-3"></icon>
          </div>
        </div>
      </div>
      <div class="input-bar">
        <p>主播昵称必须为2-15个汉字(一个字等于两个英文字符或特殊字符)</p>
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">主播昵称</div>
            <input class="flex-item" v-model="info.anchorName" maxlength="15" placeholder="最多15个字"/>
          </div>
        </div>
      </div>
      <div class="input-bar">
        <p>每个直播间需要绑定一个用作核实主播身份，不展示给观众</p>
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">主播微信号</div>
            <input class="flex-item" v-model="info.anchorWechat"  maxlength="20" placeholder="最多20个字"/>
          </div>
        </div>
      </div>
      <div class="input-bar">
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">分享卡片封面</div>
          </div>
          <p class="tip-2">每观众在微信对话框内分享的直播间将以分享卡片的形式呈现。 建议尺寸：800像素×640像素，图片大小不得超过1M</p>
          <div class="upload-bar">
            <upload-img v-show="shareFiles.length <= 1" @upLoadSuccess="upLoadShareSuccess" @upLoadFail="upLoadFail" @uploadDelete="uploadShareDelete"
              :showTip=false :uploadFiles="info.shareArrImg" v-if="isInitDone"
              :maxLength=1 :count=1></upload-img>
            <!-- <img v-else class="show-img width-79 height-79" mode="aspectFill" :src="info.shareImg" /> -->
          </div>
        </div>
      </div>
      <div class="input-bar">
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">直播卡片封面</div>
          </div>
          <p class="tip-2">设置后官方推荐的小程序直播将会出现在购物直播频道内。 图片建议大小为 800像素x800像素，图片大小不得超过100KB</p>
          <div class="upload-bar">
            <upload-img v-show="feedsFiles.length <= 1" @upLoadSuccess="upLoadLiveSuccess" @upLoadFail="upLoadFail" @uploadDelete="uploadLiveDelete"
              :showTip=false :uploadFiles="info.feedsArrImg" v-if="isInitDone"
              :maxLength=1 :count=1></upload-img>
            <!-- <img v-else class="show-img width-79 height-79" mode="aspectFill" :src="info.shareImg" /> -->
          </div>
        </div>
      </div>
      <div class="input-bar">
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">直播间背景墙</div>
          </div>
          <p class="tip-2">直播背景墙是每个直播间的默认背景 建议尺寸：1080像素×1920像素，图片大小不得超过2M</p>
          <div class="upload-bar">
            <upload-img v-show="coverFiles.length <= 1" @upLoadSuccess="upLoadBgSuccess" @upLoadFail="upLoadFail" @uploadDelete="uploadBgDelete"
              :showTip=false :uploadFiles="info.coverArrImg" v-if="isInitDone"
              :maxLength=1 :count=1></upload-img>
            <!-- <img v-else class="show-img width-79 height-79" mode="aspectFill" :src="info.coverImg" /> -->
          </div>
        </div>
      </div>
      <div class="input-bar">
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">视频介绍</div>
          </div>
          <p class="tip-2">注：非必填项，用于未开播顾客进入直播分享页了解本场直播视频大小不得超过5M</p>
          <div class="upload-bar">
            <upload-video @upLoadSuccess="upLoadVideoSuccess" @upLoadFail="upLoadVideoFail" @uploadDelete="uploadVideoDelete"
              :maxLength=1 :uploadFiles="info.videoArr" v-if="isInitDone"></upload-video>
          </div>
        </div>
      </div>
      <div class="input-bar">
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">直播功能</div>
          </div>
          <div class="flex v-align-c">
            <div class="flex-item">
              <div class="flex v-align-c" @click="checkboxSel(1)">
                <van-checkbox :value="closeComment" shape="square" checked-color="#ffe200"></van-checkbox>
                <span class="mar-l-6 font-13">评论</span>
              </div>
            </div>
            <div class="flex-item">
              <div class="flex v-align-c" @click="checkboxSel(2)">
                <van-checkbox :value="closeLike" shape="square" checked-color="#ffe200"></van-checkbox>
                <span class="mar-l-6 font-13">点赞</span>
              </div>
            </div>
            <div class="flex-item">
              <div class="flex v-align-c" @click="checkboxSel(3)">
                <van-checkbox :value="closeGoods" shape="square" checked-color="#ffe200"></van-checkbox>
                <span class="mar-l-6 font-13">商品货架</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="input-bar">
        <div class="input-line">
          <div class="flex v-aling-c">
            <div class="font-16 font-color-6">分享文案</div>
          </div>
          <div class="flex v-align-c">
            <textarea class="profile-textarea flex-item" v-model="info.shareCopy" cursor-spacing="150" maxlength="140" placeholder="请输入分享文案最多140字"/>
          </div>
        </div>
      </div>
    </div>
    <div class="height-54"></div>
    <div class="text-align-c submit-footer">
      <button class="submit-btn" @click="doSave">下一步</button>
    </div>
  </div>
</template>

<script>
  import UploadImg from '@/components/UploadImg'
  import UploadVideo from '@/components/UploadVideo'
  import { getLiveRoomApply } from '@/api/personal'
  export default {
    components: { UploadImg, UploadVideo },
    data() {
      return {
        activeIndex: 0,
        tabs: ['基本设置', '商品设置'],
        info: {
          dateStartValue: '日期',
          timeStartValue: '时间',
          dateEndValue: '日期',
          timeEndValue: '时间',
          closeLike: true,
          closeGoods: true,
          closeComment: true,
          videoArr: [],
          shareArrImg: [],
          feedsArrImg: [],
          coverArrImg: [],
          shareImg: '',
          feedsImg: '',
          coverImg: '',
          introduceVideo: ''
        },
        videoFiles: [],
        shareFiles: [],
        feedsFiles: [],
        coverFiles: [],
        isUploadVideoFinish: false,
        isUploadShareFinish: false,
        isUploadLiveFinish: false,
        isUploadBgFinish: false,
        submitted: false,
        uploadNum: 0,
        isInitDone: false,
        editShare: false,
        editLive: false,
        editBg: false,
        editNum: 0,
        closeLike: true,
        closeGoods: true,
        closeComment: true
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    // 监听上传是否完成
    watch: {
      isUploadVideoFinish(val) {
        if (this.isUploadVideoFinish) {
          this.doSave()
        }
      },
      isUploadShareFinish(val) {
        if (this.isUploadShareFinish) {
          this.doSave()
        }
      },
      isUploadLiveFinish(val) {
        if (this.isUploadLiveFinish) {
          this.doSave()
        }
      },
      isUploadBgFinish(val) {
        if (this.isUploadBgFinish) {
          this.doSave()
        }
      },
      uploadNum(val) {
        if ((this.videoFiles.length && val === 4) || (!this.videoFiles.length && val === 3)) {
          this.setDataEls()
        }
      },
      editShare(val) {
        if (val && this.uploadNum === 1) {
          this.setDataEls()
        }
      },
      editLive(val) {
        if (val && this.uploadNum === 1) {
          this.setDataEls()
        }
      },
      editBg(val) {
        if (val && this.uploadNum === 1) {
          this.setDataEls()
        }
      },
      editNum(val) {
        if ((this.videoFiles.length && val === 4) || (!this.videoFiles.length && val === 3)) {
          this.setDataEls()
        }
      }
    },
    onShow() {
      if (this.$pt.getStorageSync('liveBasicInfo')) {
        this.info = this.$pt.getStorageSync('liveBasicInfo')
        if (Number(this.info.closeLike)) { this.closeLike = false } else { this.closeLike = true }
        if (Number(this.info.closeGoods)) { this.closeGoods = false } else { this.closeGoods = true }
        if (Number(this.info.closeComment)) { this.closeComment = false } else { this.closeComment = true }
      }
    },
    mounted() {
      if (this.getCurrentPage().query.applyId) {
        this.getLiveRoomApply(this.getCurrentPage().query.applyId)
      } else {
        this.initEls()
      }
    },
    methods: {
      upLoadVideoSuccess(res) {
        this.videoFiles = res.files
      },
      uploadVideoDelete(res) {
        this.videoFiles = res.files
      },
      initEls() {
        this.isUploadShareFinish = false
        this.isUploadLiveFinish = false
        this.isUploadBgFinish = false
        this.isUploadVideoFinish = false
        this.uploadNum = 0
        this.editNum = 0
        this.editShare = false
        this.editLive = false
        this.editBg = false
        this.isInitDone = true
      },
      tabClick(e) {
        if (e === 1) {
          this.doSave()
        }
      },
      dateStartChange(e) {
        this.info.dateStartValue = e.mp.detail.value
      },
      timeStartChange(e) {
        this.info.timeStartValue = e.mp.detail.value
        this.timeCheck()
      },
      dateEndChange(e) {
        this.info.dateEndValue = e.mp.detail.value
      },
      timeEndChange(e) {
        this.info.timeEndValue = e.mp.detail.value
        this.timeCheck()
      },
      checkboxSel(val) {
        switch (val) {
          case 1:
            this.closeComment = !this.closeComment
            break
          case 2:
            this.closeLike = !this.closeLike
            break
          case 3:
            this.closeGoods = !this.closeGoods
            break
        }
      },
      upLoadShareSuccess(res) {
        this.shareFiles = res.files
      },
      uploadShareDelete(res) {
        this.shareFiles = res.files
      },
      upLoadLiveSuccess(res) {
        this.feedsFiles = res.files
      },
      uploadLiveDelete(res) {
        this.feedsFiles = res.files
      },
      upLoadBgSuccess(res) {
        this.coverFiles = res.files
      },
      uploadBgDelete(res) {
        this.coverFiles = res.files
      },
      setDataEls() {
        this.info.shareImg = this.info.shareArrImg[0]
        this.info.feedsImg = this.info.feedsArrImg[0]
        this.info.coverImg = this.info.coverArrImg[0]
        if (this.videoFiles.length) {
          this.info.introduceVideo = this.info.videoArr[0]
          if (!this.info.introduceVideo) {
            return this.$utils.showToast({ title: '上传失败，请重新选择视频！' })
          }
        }
        if (!this.info.shareImg) {
          return this.$utils.showToast({ title: '上传失败，请重新选择分享卡片封面！' })
        }
        if (!this.info.feedsImg) {
          return this.$utils.showToast({ title: '上传失败，请重新选择直播卡片封面！' })
        }
        if (!this.info.coverImg) {
          return this.$utils.showToast({ title: '上传失败，请重新选择直播间背景墙！' })
        }
        if ((this.info.dateStartValue + this.info.timeStartValue) !== '日期时间') {
          this.info.startDate = this.$utils.formatTimeStamp(this.info.dateStartValue + ' ' + this.info.timeStartValue)
        }
        if ((this.info.dateEndValue + this.info.timeEndValue) !== '日期时间') {
          this.info.endDate = this.$utils.formatTimeStamp(this.info.dateEndValue + ' ' + this.info.timeEndValue)
        }
        this.info.closeLike = this.closeLike ? 0 : 1
        this.info.closeGoods = this.closeGoods ? 0 : 1
        this.info.closeComment = this.closeComment ? 0 : 1
        this.$pt.setStorageSync('liveBasicInfo', this.info)
        this.$pt.hideToast()
        // 点赞功能 1关闭点赞 0开启点赞   closeLike; // 商品货架  1关闭货架 0打开货架   closeGoods; // 评论功能 1关闭评论 0打开评论， closeComment;
        setTimeout(() => {
          this.$pt.redirectTo({url: '/pages/home/live-apply/goods-add/main'})
        }, 200)
      },
      timeCheck() {
        let currentTimer = new Date().getTime()
        if ((this.info.dateStartValue + this.info.timeStartValue) !== '日期时间') {
          let startTimer = this.$utils.formatTimeStamp(this.info.dateStartValue + ' ' + this.info.timeStartValue)
          if (startTimer <= (currentTimer + 10 * 60 * 1000)) {
            this.$utils.showToast({ title: '开播时间至少在10分钟后' })
            return false
          }
        }
        if ((this.info.dateStartValue + this.info.timeStartValue) !== '日期时间' && (this.info.dateEndValue + this.info.timeEndValue) !== '日期时间') {
          let startTimer = this.$utils.formatTimeStamp(this.info.dateStartValue + ' ' + this.info.timeStartValue)
          let endTimer = this.$utils.formatTimeStamp(this.info.dateEndValue + ' ' + this.info.timeEndValue)
          if (startTimer >= endTimer) {
            this.$utils.showToast({ title: '开始时间应在结束时间之前' })
            return false
          }
        }
        if ((this.info.dateStartValue + this.info.timeStartValue) !== '日期时间' && (this.info.dateEndValue + this.info.timeEndValue) !== '日期时间') {
          let startTimer = this.$utils.formatTimeStamp(this.info.dateStartValue + ' ' + this.info.timeStartValue)
          let endTimer = this.$utils.formatTimeStamp(this.info.dateEndValue + ' ' + this.info.timeEndValue)
          if (endTimer - startTimer < 30 * 60 * 1000) {
            this.$utils.showToast({ title: '开播时间与结束时间必须大于30分钟' })
            return false
          }
        }
        return true
      },
      doSave() {
        if (this.shareFiles.length > 1) {
          return this.$utils.showToast({ title: '最多只能上传1张图片' })
        }
        if (this.feedsFiles.length > 1) {
          return this.$utils.showToast({ title: '最多只能上传1张图片' })
        }
        if (this.coverFiles.length > 1) {
          return this.$utils.showToast({ title: '最多只能上传1张图片' })
        }
        if (!this.isUploadShareFinish && !this.isUploadLiveFinish && !this.isUploadBgFinish && !this.isUploadVideoFinish) {
          this.timeCheck()
          if (!this.timeCheck()) return
          if (!this.shareFiles.length && !this.coverFiles.length && !this.feedsFiles.length && !this.videoFiles.length) {
            this.setDataEls()
            return
          }
          // 开始上传文件
          this.$utils.showToast({
            title: '上传中',
            icon: 'loading',
            duration: 150000,
            mask: true
          })
          this.doShareUpload()
          this.doLiveUpload()
          this.doBgUpload()
          if (this.videoFiles.length) {
            this.doVideoUpload()
          }
        } else {
          this.isUploadShareFinish = false
          this.isUploadLiveFinish = false
          this.isUploadBgFinish = false
          this.isUploadVideoFinish = false
          // 上传完成，清除数据
          this.shareFiles = []
          this.feedsFiles = []
          this.coverFiles = []
          // 防止重复提交
          if (this.submitted) return
          this.submitted = true
        }
      },
      doVideoUpload() {
        const that = this
        let index = 0
        let finishCount = 0
        // 分享图
        if (this.videoFiles.length === 0) {
          that.isUploadVideoFinish = true
          if (this.$pt.getStorageSync('liveBasicInfo')) {
            that.isUploadVideoFinish = false
            that.editNum++
            return
          }
        }
        this.videoFiles.forEach(file => {
          if (index === 0) {
            // 数组重新计算
            that.info.videoArr = []
          }
          that.editNum = -1
          this.editNum++
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                finishCount--
                that.$pt.hideToast()
                return
              }
              if (result.code === 101) {
                if (that.$pt.getStorageSync('liveBasicInfo')) {
                  that.editShare = true
                }
                that.info.videoArr.push(result.data[0])
                that.uploadNum++
              } else {
                that.$utils.showToast({ title: '分享卡片封面，图片上传发生错误:' + result.msg, duration: 3000 })
                finishCount--
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
              }
            },
            fail() {
              // that.$pt.hideToast()
              // 网络图片会直接fail
              that.info.videoArr.push(file)
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 800)
                return
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '分享卡片封面，图片上传网络异常，请稍后再试（' + res.statusCode + '）', duration: 3000 })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
                return
              }
              finishCount++
              if (that.videoFiles.length === finishCount) {
                that.isUploadVideoFinish = true
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      doShareUpload() {
        const that = this
        let index = 0
        let finishCount = 0
        // 分享图
        if (this.shareFiles.length === 0) {
          that.isUploadShareFinish = true
          if (this.$pt.getStorageSync('liveBasicInfo')) {
            that.isUploadShareFinish = false
            that.editNum++
            return
          }
        }
        this.shareFiles.forEach(file => {
          if (index === 0) {
            // 数组重新计算
            that.info.shareArrImg = []
          }
          that.editNum = -1
          this.editNum++
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                finishCount--
                that.$pt.hideToast()
                return
              }
              if (result.code === 101) {
                if (that.$pt.getStorageSync('liveBasicInfo')) {
                  that.editShare = true
                }
                that.info.shareArrImg.push(result.data[0])
                that.uploadNum++
              } else {
                that.$utils.showToast({ title: '分享卡片封面，图片上传发生错误:' + result.msg, duration: 3000 })
                finishCount--
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
              }
            },
            fail() {
              // that.$pt.hideToast()
              // 网络图片会直接fail
              that.info.shareArrImg.push(file)
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 800)
                return
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '分享卡片封面，图片上传网络异常，请稍后再试（' + res.statusCode + '）', duration: 3000 })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
                return
              }
              finishCount++
              if (that.shareFiles.length === finishCount) {
                that.isUploadShareFinish = true
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      doLiveUpload() {
        const that = this
        let index = 0
        let finishCount = 0
        // 直播卡片封面
        if (this.feedsFiles.length === 0) {
          that.isUploadLiveFinish = true
          if (this.$pt.getStorageSync('liveBasicInfo')) {
            that.isUploadLiveFinish = false
            that.editNum++
            return
          }
        }
        this.feedsFiles.forEach(file => {
          if (index === 0) {
            // 数组重新计算
            that.info.feedsArrImg = []
          }
          that.editNum = -1
          this.editNum++
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                finishCount--
                that.$pt.hideToast()
                return
              }
              if (result.code === 101) {
                if (that.$pt.getStorageSync('liveBasicInfo')) {
                  that.editLive = true
                }
                that.info.feedsArrImg.push(result.data[0])
                that.uploadNum++
              } else {
                that.$utils.showToast({ title: '直播卡片封面，图片上传发生错误:' + result.msg, duration: 3000 })
                finishCount--
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
              }
            },
            fail() {
              // that.$pt.hideToast()
              // 网络图片会直接fail
              that.info.feedsArrImg.push(file)
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 800)
                return
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '直播卡片封面，图片上传网络异常，请稍后再试（' + res.statusCode + '）', duration: 3000 })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
                return
              }
              finishCount++
              if (that.feedsFiles.length === finishCount) {
                that.isUploadLiveFinish = true
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      doBgUpload() {
        const that = this
        let index = 0
        let finishCount = 0
        // 背景图
        if (this.coverFiles.length === 0) {
          that.isUploadBgFinish = true
          if (this.$pt.getStorageSync('liveBasicInfo')) {
            that.isUploadBgFinish = false
            that.editNum++
            return
          }
        }
        this.coverFiles.forEach(file => {
          if (index === 0) {
            // 数组重新计算
            that.info.coverArrImg = []
          }
          that.editNum = -1
          this.editNum++
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                finishCount--
                that.$pt.hideToast()
                return
              }
              if (result.code === 101) {
                if (that.$pt.getStorageSync('liveBasicInfo')) {
                  that.editBg = true
                }
                that.info.coverArrImg.push(result.data[0])
                that.uploadNum++
              } else {
                that.$utils.showToast({ title: '直播间背景墙，图片上传发生错误:' + result.msg, duration: 3000 })
                finishCount--
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
              }
            },
            fail() {
              // that.$pt.hideToast()
              // 网络图片会直接fail
              that.info.coverArrImg.push(file)
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 800)
                return
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '直播间背景墙，图片上传网络异常，请稍后再试（' + res.statusCode + '）', duration: 3000 })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 3000)
                return
              }
              finishCount++
              if (that.coverFiles.length === finishCount) {
                that.isUploadBgFinish = true
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      getLiveRoomApply(applyId) {
        this.$utils.showToast({
          title: '加载中',
          icon: 'loading'
        })
        getLiveRoomApply({
          applyId: applyId
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          let info = response.data
          info.shareArrImg = []
          info.feedsArrImg = []
          info.coverArrImg = []
          info.shareArrImg.push(info.shareImg)
          info.feedsArrImg.push(info.feedsImg)
          info.coverArrImg.push(info.coverImg)
          info.dateStartValue = info.startDate.substring(0, 10)
          info.dateEndValue = info.endDate.substring(0, 10)
          info.timeStartValue = info.startDate.substring(11, 16)
          info.timeEndValue = info.endDate.substring(11, 16)
          info.startDate = new Date(info.startDate).getTime()
          info.endDate = new Date(info.endDate).getTime()
          if (info.introduceVideo) {
            let introduceVideoArr = []
            introduceVideoArr.push(info.introduceVideo)
            info.videoArr = introduceVideoArr
          } else {
            info.introduceVideo = ''
            info.videoArr = []
          }
          let applyGoodsList = info.liveRoomApplyGoodsList
          this.$pt.setStorageSync('liveBasicInfo', info)
          this.$pt.setStorageSync('applyGoodsList', applyGoodsList)
          this.initEls()
          if (this.$pt.getStorageSync('liveBasicInfo')) {
            this.info = this.$pt.getStorageSync('liveBasicInfo')
            if (Number(this.info.closeLike)) { this.closeLike = false } else { this.closeLike = true }
            if (Number(this.info.closeGoods)) { this.closeGoods = false } else { this.closeGoods = true }
            if (Number(this.info.closeComment)) { this.closeComment = false } else { this.closeComment = true }
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  background: #fafafa;
  min-height: calc(100vh);
  .profile-textarea {
    width: 90%;
    height: 150px;
    padding: 12px;
    border: #ededed 1px solid;
    border-radius: 5px;
  }
  .top-tabs{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    background: #fff;
    ul{
      border-bottom: #f4f4f4 1px solid;
      border-top: #e9e9e9 1px solid;
      li{        
        div{
          height: 40px;
          position: relative;
          color: #999;
          &.actived{
            color: #333;
          }
          &.actived:after{
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 60px;
            height: 2px;
            margin-left: -30px;
            background: #333;
          }
        }
      }
    }
  }
  .info-content{
    .input-bar{
      padding-top: 13px;
      p{
        margin: 0;
        padding: 0 15px 5px;
        font-size: 12px;
        color: #999;
        line-height: 1.3;
        &.tip-2{
          padding: 0 0 5px;
          color: #C4C4C4;
          line-height: 1.5;
        }
      }
      .input-line{
        background: #fff;
        padding: 0px 15px;
        >.flex{
          padding: 12px 0;
          &.border-b{
            border-bottom: #fafafa 1px solid;
          }
        }        
        .picker-data.font-color-6{
          /deep/ span{
            color: #666;
            text-decoration: underline;
          }          
        }
        .picker-data.font-color-9{
          /deep/ span{
            color: #999;
            text-decoration: underline;
          }          
        }
        input{
          text-align: right;
        }
      }
    }
  }
  .upload-bar{
    min-height: 82px;
    padding: 13px 0 30px;
  }
  .submit-footer{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  .submit-btn{
    width: 100%;  
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #ffe200;
    color: #333;
    font-size: 16px;
    &:after{
      border: unset;
    }
  }
}
</style>
